<template>
    <div class="cpImgBox" :style="'background-image:url('+imgUrl+');background-size:'+bSize"></div>
</template>

<script setup>
import {ref,onMounted,watch} from "vue"

const props = defineProps({
    url:{
        type:String,
        default:()=>''
    },
    bSize:String
})

const imgUrl = ref('')

watch(()=>props.url,(newData,oldData)=>{
    !newData && (imgUrl.value = '/images/course-defalut.jpg')
    imgUrl.value = newData
})

onMounted(()=>{
    if(props.url){
        imgUrl.value = props.url
    }else{
        imgUrl.value = '/images/avatar-defalut.png'
    }
})
</script>

<style lang="scss" scoped>
    .cpImgBox{
        width: 100%;
        height: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        background-color: #f1eeee;
    }
</style>